﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>元宵节</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/myswiper.css">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<script src="js/myswiper.js"></script>
<!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
<link rel="stylesheet" href="/dist/css/animate.min.css">
<script src="/dist/js/swiper.min.js"></script>
<script src="/dist/js/swiper.animate.min.js"></script>-->

<style>
*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
  font-family: "微软雅黑";
}
body{
	font-family:"microsoft yahei";
}
.swiper-container {
  /*  width: 320px;
    height: 480px;*/
	width: 100%;
    height: 100%;
	background:#fff;
}  
.swiper-slide{
}
.swiper-slide{
	width:100%;
	height:100%;
}
.picture_1{
	background:url(images/F1.jpg) no-repeat left top;
	background-size:100% 100%;
}
.picture_2{
  width: 100%;
  height: 100%;
  background: url(images/背景2222.jpg) no-repeat;
  background-size: 100% 100%;
}
.picture_3{
  width: 100%;
  height: 100%;
  background: url(images/背景33.jpg) no-repeat;
  background-size: 100% 100%;
}
.picture_4{
  width: 100%;
  height: 100%;
  background: url(images/h1.png) no-repeat;
  background-size: 100% 100%;
}
.picture_5{
  width: 100%;
  height: 100%;
  background: url(images/a7.jpg) no-repeat;
  background-size: 100% 100%;
}
.picture_6{
  width: 100%;
  height: 100%;
  background: url(images/H33.jpg) no-repeat;
  background-size: 100% 100%;
}
img{
	display:block;
}

.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: #fff;
opacity: .4;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes tipmove{0%{bottom:10px;opacity:0}50%{bottom:15px;opacity:1}100%{bottom:20px;opacity:0}}
.ani{
	position:absolute;
	}
.txt_aa{
	position:absolute;
  color: #32cd32;
}
.fotz{
  color:#ff4500;
}
.fotw{
  color: #fff;
}
.fotb{
  color: green;
}
#array{
	position:absolute;z-index:999;-webkit-animation: tipmove 1.5s infinite ease-in-out;
}
.add_a{
  opacity: 0.4;
}
.add_b{
  opacity: 1;
}

</style>
</head>

<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
   
        
      
        <section class="swiper-slide picture_1">

        <div class="ani resize" style="width:20px;height:150px;left:110px;top:100px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s" swiper-animate-delay="0.6s"  >
          <div class="txt txt_aa">
          <p style="width:15px;color:#32cd32; display:inline-block; font-size:100%; line-height:1.5; margin-right:10px;"><h3>你</h3>还记得</p>
          </div>
        </div>

        <div class="ani resize" style="width:20px;height:150px;left:70px;top:160px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s" swiper-animate-delay="1.6s"  >
          <div class="txt">
          <p style="width:15px;color:#32cd32; display:inline-block; font-size:100%; line-height:1.5; margin-right:10px;">曾几何时的青春记忆里</p>
          </div>
        </div>

        <div class="ani resize" style="width:20px;height:150px;left:30px;top:220px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s" swiper-animate-delay="2.5s"  >
          <div class="txt">
          <p style="width:15px;color:#32cd32; display:inline-block; font-size:100%; line-height:1.5; margin-right:10px;">陪伴你的是哪款美食吗</p>
          </div>
        </div>
        </section>
        
        <section class="swiper-slide picture_2">
        <img src="images/222_a.jpg" class="ani resize" style="width:240px;height:140px;left:38px;top:262px;z-index:5; border-radius:20px;" swiper-animate-effect="fadeInLeft rotateInDownRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.9s"  > 

        <img src="images/222_b.jpg" class="ani resize" style="width:240px;height:140px;left:30px;top:42px;z-index:5; border-radius:20px;" swiper-animate-effect="fadeInLeft rotateInDownLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.1s"  > 

        <div class="ani resize" style="width:250px;height:20px;left:45px;top:220px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.2s" swiper-animate-delay="1.6s"  >
          <div class="txt">
          <span style="color:#fff; display:inline-block; font-size:90%; line-height:1; margin-right:0px;"><a style="font-size:150%">是</a>为了集齐玩具而买的小零食?</span>
          </div>
        </div>
        </section>

        <section class="swiper-slide picture_3">
        
        <img src="images/333_a.jpg" class="ani resize" style="width:295px;height:250px;left:12px;bottom:10px;z-index:5; border-radius:10px;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.2s"  > 
        <div class="ani resize" style="width:200px;height:20px;left:30px;top:32px;z-index:9; letter-spacing:5px;" swiper-animate-effect="slideInRight" swiper-animate-duration="1s" swiper-animate-delay="0.2s"  >
          <div class="txt">
          <span style="color:#000; display:block; font-size:100%; line-height:1; margin-right:0px;">还是那些</span>
          </div>
        </div>

        <div class="ani resize" style="width:230px;height:20px;left:100px;top:90px;z-index:9; letter-spacing:5px;" swiper-animate-effect="slideInRight" swiper-animate-duration="1s" swiper-animate-delay="0.4s"  >
          <div class="txt">
          <span style="color:#000; display:block; font-size:100%; line-height:1; margin-right:0px;">色彩斑斓的</span>
          </div>
        </div>

        <div class="ani resize" style="width:200px;height:20px;left:200px;top:170px;z-index:9; letter-spacing:5px;" swiper-animate-effect="slideInRight" swiper-animate-duration="0.6s" swiper-animate-delay="0.6s"  >
          <div class="txt">
          <span style="color:#000; display:block; font-size:100%; line-height:1; margin-right:0px;">玻璃汽水</span>
          </div>
        </div>
        </section>

        

        <section class="swiper-slide picture_5">

        <div class="ani resize" style="width:500px;height:100px;left:260px;top:70px;z-index:3;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.1s"  >
          <div class="txt">
          <p style="width:15px;color:#696969; display:inline-block; font-size:150%; line-height:1.5; margin-right:10px;" id="nimeide">又或是</p>
          </div>
        </div>

        <div class="ani resize" style="width:70px;height:50px;left:26px;top:310px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2.8s" swiper-animate-delay="0.6s"  >
          <div class="txt">
          <p style="width:150px;color:#000; display:inline-block; font-size:90%; line-height:1.5; margin-right:10px;">无花果</p>
          </div>
        </div>
        <div class="ani resize" style="width:70px;height:50px;left:108px;top:280px;z-index:3;" swiper-animate-effect="fadeInLeft rotateInUpLeft" swiper-animate-duration="2.8s" swiper-animate-delay="0.8s"  >
          <div class="txt">
          <p style="width:150px;color:#000; display:inline-block; font-size:90%; line-height:1.5; margin-right:10px;">口红糖</p>
          </div>
        </div>
        <div class="ani resize" style="width:70px;height:50px;left:262px;top:412px;z-index:3;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2.8s" swiper-animate-delay="1s"  >
          <div class="txt">
          <p style="width:150px;color:#000; display:inline-block; font-size:90%; line-height:1.5; margin-right:10px;">西瓜糖</p>
          </div>
        </div>
        </section>

        <section class="swiper-slide picture_6">
                       <!-- 星球1 -->
          <div class="ani resize" class="ani resize" style="width:160px;height:60px;left:38px;top:40px;z-index:5; border-radius:50%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.1s">
            <img src="images/2.png" class="addrem addrem_1" style="width:50px;height:50px">

          </div>
          <div class="ani resize txt fotz" style="width:60px;height:20px;left:37px;top:83px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.2s" swiper-animate-delay="0.1s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">英雄号</div>
          </div>
          <div id="star_1" class="ani star_1 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            英雄有料：被草泥马玩偶包围的创新日料.<a style="" id="goback_1">返回</a></div>
          </div>
                         <!-- 星球2 -->
          <div class="ani resize" class="ani resize" style="width:130px;height:60px;left:125px;top:40px;z-index:5; border-radius:50%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
            <img src="images/3.png" class="addrem addrem_2" style="width:50px;height:50px"> 
          </div>
          <div class="ani resize txt fotz" style="width:60px;height:20px;left:125px;top:83px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.2s" swiper-animate-delay="0.6s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">府河号</div>
          </div>
          <div class="ani star_2 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            府河人家：冰火两重天。<a style="" id="goback_2">返回</a></div>
          </div>
                        <!-- 星球3 -->
          <div class="ani resize" class="ani resize" style="width:200px;height:60px;left:220px;top:40px;z-index:5; border-radius:50%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.9s">
            <img src="images/4.png" class="addrem addrem_3" style="width:50px;height:50px"> 
          </div>
          <div class="ani resize txt fotz" style="width:60px;height:20px;left:220px;top:83px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.2s" swiper-animate-delay="0.9s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">97号</div>
          </div>
          <div class="ani star_3 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            97夜店：脱单圣地，你懂得。<a style="" id="goback_3">返回</a></div>
          </div>
                         <!-- 星球4 -->
          <div class="ani resize" class="ani resize" style="width:160px;height:60px;left:70px;top:110px;z-index:5; border-radius:50%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1.1s">
            <img src="images/8.png" class="addrem addrem_4" style="width:50px;height:50px"> 
          </div>
          <div class="ani resize txt fotz" style="width:60px;height:60px;left:70px;top:153px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.2s" swiper-animate-delay="1.1s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">8道号</div>
          </div>
          <div class="ani star_4 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            虾说8道：脱离了低级趣味的虾。<a style="" id="goback_4">返回</a></div>
          </div>
                        <!-- 星球5 -->
          <div class="ani resize" class="ani resize" style="width:160px;height:60px;left:155px;top:110px;z-index:5;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s">
            <img src="images/1.png" class="addrem addrem_5" style="width:100px;height:55px"> 
          </div>
          <div class="ani resize txt fotz" style="width:60px;height:60px;left:185px;top:150px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.2s" swiper-animate-delay="1.5s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">63号</div>
          </div>
          <div class="ani star_5 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            63号小馆：高人气地道赣菜小馆。<a style="" id="goback_5">返回</a></div>
          </div>
                          <!-- 星球6  -->
          <div class="ani resize" class="ani resize" style="width:160px;height:60px;left:15px;top:180px;z-index:5; border-radius:50%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1.8s">
            <img src="images/7.png" class="addrem addrem_6" style="width:50px;height:50px"> 
          </div>
          <div class="ani resize txt fotz" style="width:60px;height:60px;left:15px;top:220px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.2s" swiper-animate-delay="1.8s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">乐町号</div>
          </div>
          <div class="ani star_6 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            乐町寿司屋：健康美味的选择。<a style="" id="goback_6">返回</a></div>
          </div>
                          <!-- 星球7 -->
          <div class="ani resize" class="ani resize" style="width:160px;height:60px;left:135px;top:180px;z-index:5; border-radius:50%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="2s">
            <img src="images/5.png" class="addrem addrem_7" style="width:50px;height:50px"> 
          </div>
          <div class="ani resize txt fotz" style="width:60px;height:60px;left:135px;top:220px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.2s" swiper-animate-delay="1.8s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">甜寇号</div>
          </div>
          <div class="ani star_7 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            甜寇：夏天不可错过的清凉。<a style="" id="goback_7">返回</a></div>
          </div>
                             <!-- 星球8 -->
          <div class="ani resize" class="ani resize" style="width:160px;height:60px;left:245px;top:180px;z-index:5; border-radius:50%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="2.3s">
            <img src="images/6.png" class="addrem addrem_8" style="width:50px;height:50px"> 
          </div>
          <div class="ani resize txt fotz" style="width:60px;height:60px;left:245px;top:220px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.2s" swiper-animate-delay="1.8s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">回忆号</div>
          </div>
          <div class="ani star_8 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            回忆秀饭堂：来一场时间之旅。<a style="" id="goback_8">返回</a></div>
          </div>
                                 <!-- 星球9 -->
          <div class="ani resize" class="ani resize" style="width:160px;height:60px;left:45px;top:390px;z-index:5; border-radius:50%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="2.6s">
            <img src="images/8.png" class="addrem addrem_9" style="width:50px;height:50px"> 
          </div>
          <div class="ani resize txt fotz" style="width:80px;height:60px;left:40px;top:430px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s" swiper-animate-delay="2.6s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">猫山王号</div>
          </div>
          <div class="ani star_9 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            猫山王：榴莲和咖啡的完美结合~<a style="" id="goback_9">返回</a></div>
          </div>
                                <!-- 星球10 -->
          <div class="ani resize" class="ani resize" style="width:160px;height:60px;left:135px;top:390px;z-index:5; border-radius:50%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="3.1s">
            <img src="images/7.png" class="addrem addrem_10" style="width:50px;height:50px"> 
          </div>
          <div class="ani resize txt fotz" style="width:80px;height:60px;left:135px;top:430px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.8s" swiper-animate-delay="3.1s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">竹亭号</div>
          </div>
          <div class="ani star_10 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            竹亭：南昌日料的启蒙大师。<a style="" id="goback_10">返回</a></div>
          </div>
                                    <!-- 星球11 -->
          <div class="ani resize" class="ani resize" style="width:160px;height:60px;left:225px;top:375px;z-index:5; border-radius:50%;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="3.5s">
            <img src="images/4.png" class="addrem addrem_11" style="width:65px;height:65px"> 
          </div>
          <div class="ani resize txt fotz" style="width:80px;height:60px;left:220px;top:425px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="3.5s"  >
          <div style="display:block; font-size:105%; font-weight:bold; line-height:1; margin-right:0px;">固可萌号</div>
          </div>
          <div class="ani star_11 resize txt" style="width:220px;height:78px;left:43px;top:260px;z-index:999;letter-spacing:4px">
            <div style="font-size:120%;font-weight:bold;line-height:30px">
            回可萌：法国人在南昌的浪漫情怀~<a style="" id="goback_11">返回</a></div>
          </div>

          <div class="ani resize txt fotw" style="width:180px;height:60px;left:40px;top:260px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s"  >
          <div style="display:block; font-size:115%; font-weight:bold; line-height:1; margin-right:0px;">无论哪款</div>
          </div>
          <div class="ani resize txt fotw" style="width:300px;height:20px;left:120px;top:290px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s"  >
          <div style="display:block; font-size:115%; font-weight:bold; line-height:1; margin-right:0px;">就是邀你来吃青春饭!</div>
          </div>

          <div class="ani resize txt fotb" style="width:300px;height:20px;left:25px;top:320px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s"  >
          <div style="display:block; font-size:160%; font-weight:bold; line-height:1; margin-right:0px;">"无美食,不青春"</div>
          </div>

          <div class="ani resize txt fotw" style="width:300px;height:20px;left:200px;top:328px;z-index:9;letter-spacing:2.5px" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s"  >
          <div style="display:block; font-size:115%; font-weight:bold; line-height:1; margin-right:0px;">的美食盛宴</div>
          </div>
        </section>
        
        <section class="swiper-slide picture_4">
        <img src="images/h2.png" class="ani resize" style="width:313px;height:450px;right:0px;top:0px;z-index:5; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.1s" /> 
        <img src="images/H3.png" class="ani resize" style="width:303px;height:450px;right:8px;top:0px;z-index:5; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.7s" swiper-animate-delay="0.6s" /> 
        <img src="images/H14.png" class="ani resize" style="width:313px;height:450px;right:0px;top:0px;z-index:5; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="3s" swiper-animate-delay="3s" />

        <img src="images/H13_03.png" class="ani resize" style="width:255px;height:60px;left:83px;top:205px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.8s" swiper-animate-delay="1.6s" /> 
        <img src="images/H12_03.png" class="ani resize" style="width:220px;height:57px;left:130px;top:206px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.8s" swiper-animate-delay="2.0s" />
        <img src="images/H11_03.png" class="ani resize" style="width:160px;height:53px;left:178px;top:207px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.8s" swiper-animate-delay="2.4s" />
        <img src="images/H10_03.png" class="ani resize" style="width:240px;height:65px;left:215px;top:203px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.8s" swiper-animate-delay="2.8s" />    
         <img src="images/H9_03.png" class="ani resize" style="width:225px;height:65px;left:262px;top:206px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.8s" swiper-animate-delay="3.2s" />
         <img src="images/H5_03.png" class="ani resize" style="width:200px;height:47px;left:110px;top:255px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.8s" swiper-animate-delay="2.8s" />
         <img src="images/H4_03.png" class="ani resize" style="width:190px;height:45px;left:77px;top:256px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.8s" swiper-animate-delay="3.2s" />
         <img src="images/H6_03.png" class="ani resize" style="width:190px;height:47px;left:33px;top:255px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.8s" swiper-animate-delay="3.6s" />
         <img src="images/H7_03.png" class="ani resize" style="width:196px;height:53px;left:-13px;top:252px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.8s" swiper-animate-delay="4s" />
         <img src="images/H8_03.png" class="ani resize" style="width:250px;height:47px;left:-110px;top:255px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.8s" swiper-animate-delay="4.4s" />
         <img src="images/H22_03.png" class="ani resize" style="width:150px;height:43px;left:-54px;top:258px;z-index:99; border-radius:20px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.8s" swiper-animate-delay="4.8s" />
        </section>


    </div>
    
   <img src="images/web-swipe-tip.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize"> 
  <div class="swiper-pagination"></div>  
</div>


<script>  

scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
          for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
		   resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
		   resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
		   resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
	
          }
var scales = document.querySelectorAll('.txt');
for (var i=0; i<scales.length; i++) {
	ss=scales[i].style;
	ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';
}

		  
  var mySwiper = new Swiper ('.swiper-container', {
   direction : 'vertical',
   loop:true,
   mousewheelControl : true,
   onInit: function(swiper){
   swiperAnimateCache(swiper);
   swiperAnimate(swiper);
	  },
   onSlideChangeEnd: function(swiper){
	swiperAnimate(swiper);
    }	  
	   })         
  </script>
</body>
</html>
